<template>
    <div class="card"> 
      <ul class="pai-item-list">
          <li v-for="item in lotsData" :key="item.id" class="pai-item">
              <a href="" class="link_wrap">
                  <el-card class="item_card" :body-style="{ padding: '0px' }">
                    <div class="item_img"  @click="lots">
                      <img :src="imgurls+item.images" class="image">
                    </div>
                  <div class="item_content">
                    <div class="item_title">
                      <span>{{item.name}}</span>
                    </div>
                    <!-- 拍卖标的1 2 6 -->
                    <div class="item_money" v-if="item.state !== '3'">
                      <p>
                        <span v-if="item.state == '1'||item.state == '6'">起拍价</span>
                        <span v-else>当前价</span>
                        <span>{{item.startprice}}元</span>
                      </p>
                      <div class="item_money_time">
                        <!--  -->
                        <p v-if="item.state == '2'||item.state == '6'">预计{{item.start_time}}结束</p>
                        <p v-else>预计{{item.start_time}}开始</p>
                        <!--  -->
                        <p class="start greenBtn" v-if="item.state == '1'">即将开始</p>
                        <p class="start yellowBtn" v-else-if="item.state == '6'">已暂停</p>
                        <p class="start redBtn" v-else>进行中</p>
                      </div>
                      
                    </div>  
                    <!-- 成交案例 3 -->
                    <div class="item_money" v-else>
                      <p>
                        <span>成交价</span>
                        <span>{{item.bidprice}}元</span>
                      </p>
                      <div class="item_money_time">
                        <p>{{item.bid_time}}结束</p>
                        <p class="start redBtn">已成交</p>
                      </div>
                      
                    </div>  
                      <div class="item_bottom clearfix">
                        <p>{{item.viewcount}}次围观</p>
                        <p>{{item.history_count}}次出价</p>
                        <!-- <el-button type="text">操作按钮</el-button> -->
                        <div>
                            <i class="el-icon-star-on" :class="[item.isfollow == 1? 'red' : '']" style="font-size:16px" @click="attentionStar(item.id)"></i>
                            <span>关注</span>
                        </div>
                      </div>
                  </div>
              </el-card>
              </a>  
          </li>
      </ul>
       
    </div>
  </template>
  <script>
  import {clickFollow} from '@/api/interface'
  export default {
    data() {
      return {
        currentDate: new Date()
      };
    },
    props:{
      lotsData:{
            type:Array,
            // default: () =>[]
        }
    },
    mounted(){
    },
    methods: {
      lots(){
      //   this.$router.resolve({
      //     path:'/lots/detail'
      // })

      },
       //星星关注
       attentionStar(id){
            clickFollow({id:this.uid,lots_id:id}).then(res =>{
              alert('成功啦')
                if(res.code == 200){
                    // this.$emit('goHomeList')
                }
            });
        },
    },
  };
  </script>
  <style lang="less" scoped>
.card{
  .red{
        color: #d13a29;
    }
    .pai-item-list{
      // display: flex;
      // flex-wrap:wrap;
      // justify-content: space-between;
      // &::after{
      //   content: '';
      //   // flex: auto;
      //   width: 280px;
      // }
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill,280px);
      grid-gap: 16px;
      .link_wrap{
        position: relative;
        display: inline-block;
        width: 280px;
        height: 348px;
        text-decoration: none;
        // .link_wrap:hover{
          // border: 2px solid #67C23A;
        // }
        .item_card{
          .item_img{
            height: 190px;
            .image {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }
          }
          
          .item_content{
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;           
            .item_title{
              height: 56px;
              font-size: 18px;
              
            }
            .item_money{
              font-size: 14px;
              color: rgb(153, 153, 153);
              .item_money_time{
                p{
                  display: inline-block;  
                }
                
                p:last-of-type{
                  font-size: 12px;
                  font-weight: 400;
                  position: absolute;
                  right: 0px;
                  width: 70px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 12px 0px 0px 12px;
                  // background-color: #67C23A;
                  color: #fff;
                }
              }
            }
            .item_money{
              p{
                margin-bottom: 10px;
              }
            }
            .item_bottom{
              height: 32px;
              border-top: 1px solid rgb(237, 237, 237);
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: rgb(153, 153, 153);
              font-size: 12px;
            }
          }
        }
        .item_card:hover{
            border: 1px solid #DF0000;
          }

        
        
      }
    }

}
    
    
    
  
  
  </style>